<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="bootoast/bootoast.css">
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootoast/bootoast.js" type="text/javascript" charset="utf-8"></script>
    <style>
        table th{
            text-align: center;
            font-size: 15px;
        }
        .pagination{
            margin: 5px 0px;
        }
    </style>
    <script>
        $(function(){

            getTypes(1);

            //初始化删除模态框
            $('#delModal').on('show.bs.modal',function (event) {
                var button = $(event.relatedTarget)
                var typeId = button.data('type-id')
                var modal =$(this)
                modal.find('.modal-body #delTypeId').val(typeId)
                console.info($('#delTypeId').val());
            })
            //删除功能
            $('#btnDel').click(function () {
                $.ajax({
                    url:'drop_type',
                    type:'post',
                    cache:false,
                    data:{id:$('#delTypeId').val()},
                    dataType: 'json',
                    success:function (rst) {
                        if (rst.code==1){
                            bootoast({
                                message:rst.msg,
                                type:'success',
                                position:'top',
                                timeout:2
                            });
                            $('#delModal').modal('hide');
                            getTypes(1);
                        }else {
                            bootoast({
                                message:rst.msg,
                                type:'danger',
                                position:'top',
                                timeout:2
                            });
                        }
                    }
                })
            })
            //初始化编辑模态框
            $('#editModal').on('show.bs.modal',function (event) {
                var button = $(event.relatedTarget)
                var typeId = button.data('type-id')
                var typeName = button.data('type-name')
                var typeDepict = button.data('type-depict')
                var modal =$(this)
                modal.find('.modal-body #typeId').val(typeId);
                modal.find('.modal-body #typeName').val(typeName);
                modal.find('.modal-body #desc').val(typeDepict);
            })
            //修改功能
            $('#btnModify').click(function(){
            if($('#typeName').val()==''){
                    bootoast({
                        message:'类型名不能为空',
                        type:'danger',
                        position:'top', 
                        timeout:2
                    });
                    return;
                }
                //修改正确
                $.ajax({
                    url:'edit_type',
                    type:'post',
                    cache:false,
                    data:{
                        typeId:$('#typeId').val(),
                        typeName:$('#typeName').val(),
                        typeDepict:$('#desc').val()
                    },
                    dataType: 'json',
                    success:function (rst) {
                        if (rst.code==1){
                            bootoast({
                                message:rst.msg,
                                type:'success',
                                position:'top',
                                timeout:2
                            });
                            $('#editModal').modal('hide');
                            getTypes(1);
                        }else {
                            bootoast({
                                message:rst.msg,
                                type:'danger',
                                position:'top',
                                timeout:2
                            });
                        }
                    }
                })
            }); 
        });
        
        function getTypes(pn) {
            $.ajax({
                url:'find_types_page',
                type:'get',
                cache:false,
                data: {pageNow:pn},
                dataType:'json',
                success:function (rst) {
                    if(rst.code == 1){
                        $('table tbody').empty();
                        $('.pagination').empty();
                        if(rst.data.types!=null&&rst.data.types.length>0){
                            for(let i = 0;i < rst.data.types.length;i++){
                                var t = rst.data.types[i];
                                $(`<tr>
                                       <td>${t.typeId}</td>
                                       <td>${t.typeName}</td>
                                       <td>${t.typeDepict=='null'?'':t.typeDepict}</td>
                                       <td>
                                          <input type="button" value="编辑" data-type-id="${t.typeId}" data-type-name="${t.typeName}"
                                          data-type-depict="${t.typeDepict}" data-toggle="modal" data-target="#editModal" class="btn btn-info btn-sm">
                                          <input type="button" value="删除" data-type-id="${t.typeId}" data-toggle="modal" data-target="#delModal" class="btn btn-danger btn-sm">
                                       </td>
                                    </tr>`).appendTo('table tbody');
                            }
                            //处理分页
                            $(`<li><a href="javascript:getTypes(${rst.data.page.pageNow-1})">&laquo;</a></li>`).appendTo('.pagination');
                            for(let i = 1;i <= rst.data.page.pageCount;i++){
                                if(i==rst.data.page.pageNow) {
                                    $(`<li class="active"><a href="#">${i}</a></li>`).appendTo('.pagination');
                                }else {
                                    $(`<li><a href="javascript:getTypes(${i})">${i}</a></li>`).appendTo('.pagination');
                                }
                            }
                            $(`<li><a href="javascript:getTypes(${rst.data.page.pageNow+1})">&raquo;</a></li>`).appendTo('.pagination');
                        }else {
                            $(`<tr>
                                       <td colspan="4" class="text-center text-danger">未查询到数据</td>
                                    </tr>`).appendTo('table tbody');
                        }
                    }
                }
            });
        }
    </script>
</head>

<body>
        <ul class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">图书管理类型</a></li>
            <li>维护图书类型</li>
        </ul>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <table class="table table-bordered ">
                        <thead>
                        <tr class="bg-primary">
                            <th style="width: 10%;">编号</th>
                            <th style="width: 25%;">类型名</th>
                            <th>类型描述</th>
                            <th style="width: 10%;">操作</th>
                        </tr>
                        </thead>
                        <tbody class="table-hover">
                        <tr>
                            <td>1</td>
                            <td>文学类</td>
                            <td>文学类图书，有丰富的文艺气息</td>
                            <td>
                                <input type="button" value="编辑" data-toggle="modal" data-target="#editModal" class="btn btn-info btn-sm">
                                <input type="button" value="删除" data-toggle="modal" data-target="#delModal" class="btn btn-danger btn-sm">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-center">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">&laquo;</a></li>
                    </ul>
                </div>
            </div>
            <div class="modal fade" id="editModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title"style="border-left: 5px royalblue solid;">温馨提示</h4>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="typeId">图书类型编号</label>
                                    <input type="text" id="typeId" readonly class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="typeName">图书类型名称</label>
                                    <input type="text" id="typeName" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="desc">图书类型描述</label>
                                    <textarea type="" id="desc" rows="5" class="form-control"></textarea>
                                </div>
                
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-danger btn-sm" id="btnModify">修改</button>
                            <button class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="delModal">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title"style="border-left: 5px royalblue solid;">温馨提示</h4>
                        </div>
                        <div class="modal-body">
                            确定删除数据吗？
                            <input id="delTypeId" type="hidden">
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-danger btn-sm" id="btnDel">确定</button>
                            <button class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>